<!-- krpano plugin page template -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="format-detection" content="telephone=no" />
<title>krpano.com - Plugins - fieldOfView Plugins - gyro</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://krpano.com/design/design.css"/>
<link rel="stylesheet" type="text/css" media="print" href="http://krpano.com/design/print.css"/>
<link rel="SHORTCUT ICON" href="http://krpano.com/design/shortcut.ico"/>
</head>
<body>
<div id="krpano_root">
  <div id="krpano_headerwrapper">
    <div id="krpano_header">
      <div id="krpano_langsel">&nbsp;</div>
      <div id="krpano_mainmenu">&nbsp;</div>
    </div>
  </div>
  <div>
    <div id="krpano_imagebar"></div>
    <div id="krpano_logo"></div>
  </div>
  <div id="krpano_imagebar_space"></div>
  <div id="krpano_contentwrapper">
    <div id="krpano_content">
      <div id="krpano_contentnav">
        <h2><a href="/krpano_fovplugins" class="selflink">fovplugins</a></h2>
        <p>This is the staging area for the fieldOfView plugins for krpano. A copy of these pages is included on krpano.com. The pages in this staging area may be newer than the respective pages on krpano.com.</p>
        <ul>
            <li><a href="http://krpano.com/plugins/userplugins/fieldofview">offical krpano.com pages</a></li>
            <li><a href="https://github.com/fieldofview/krpano_fovplugins">source repository</a></li>
        </ul>
      </div>
      <a name="top"></a>
      <div id="krpano_contenttext"> 
        <!-- USER CONTENT STARTS HERE -->
        
        <h1>Gyroscope Plugin <span class="pluginfilename">gyro.js</span> 
          <span class="flashhtml5">for HTML5</span>
          <div class="pluginautor">by Aldo Hoeben - <a href="http://fieldofview.com">fieldofview.com</a><br>
          With contributions by <a href="http://ronvalstar.nl">Sjeiti</a> and <a href="http://krpano.com">Klaus</a>
          </div>
        </h1>
        <div class="paragraph">
          <h2><a name="description" href="#description" class="selflink">Description</a></h2>
          <p>This plugin uses the gyroscope in iOS devices such as the iPhone 4 and iPad 2 to control the view in
krpanoJS.</p>
        </div>
        <div class="paragraph">
          <h2><a name="download" href="#download" class="selflink">Download</a></h2>
          <div class="dlitem"> <a href="http://fieldofview.github.com/krpano_fovplugins/gyro.js">gyro.js</a>&nbsp; <small>(plugin only)</small></div>
          <p>The gyro <a href="https://github.com/fieldOfView/krpano_fovplugins/tree/master/gyro">sources and examples</a> are available as part of the fovplugins package</p>
          <div class="dlitem"> <a href="https://github.com/fieldOfView/krpano_fovplugins/zipball/master">fovplugins.zip</a>&nbsp; <small>(plugin, source code &amp; examples)</small><br/>
          </div>
        </div>
        <div class="paragraph">
          <h2><a name="forum" href="#forum" class="selflink">krpano Forum Discussion Thread</a></h2>
          <a href="http://krpano.com/forum/wbb/index.php?page=Thread&postID=23264">Gyroscope Plugin Thread</a> </div>
        <div class="paragraph">
          <h2><a name="syntax" href="#syntax" class="selflink">Syntax / XML Usage Example</a></h2>
          <pre class="xmlpre">&lt;<a href="http://krpano.com/docu/xml/#plugin">plugin</a> <a href="http://krpano.com/docu/xml/#plugin.name">name</a>="gyro" 
        <a href="http://krpano.com/docu/xml/#plugin.url">url</a>="gyro.js" 
        <a href="http://krpano.com/docu/xml/#plugin.keep">keep</a>="true"
        <a href="#enabled" class="pluginattrib">enabled</a>="true"
        <a href="#onavailable" class="pluginattrib">onavailable</a>="trace('Gyroscope is available')"
        <a href="#camroll" class="pluginattrib">camroll</a>="true"
        <a href="#friction" class="pluginattrib">friction</a>="0.5"
        <a href="#velastic" class="pluginattrib">velastic</a>="0.2"
        <a href="#vrelative" class="pluginattrib">vrelative</a>="false"
        /&gt;</pre>
        </div>
        <div class="paragraph">
          <h2><a name="attributes" href="#attributes" class="selflink">Plugin Attributes</a></h2>
          <dl>
            <dt><a name="available" href="#available" class="selflink">available</a></dt>
            <dd>This read-only attribute is only set to true if the browser/device is generating deviceorientation events. It can be used to determine if a ui for the gyroscope is applicable.<br>
              values: true/false, read-only</dd>
            <dt><a name="onavailable" href="#onavailable" class="selflink">onavailable</a></dt>
            <dd>Actions / functions that will be called when the plugin detects the gyroscope device.<br>
              values: function or action-name</dd>
            <dt><a name="enabled" href="#enabled" class="selflink">enabled</a></dt>
            <dd>Enables and/or disables the gyroscope for navigation.<br>
              values: true/false, default: true</dd>
            <dt><a name="camroll" href="#camroll" class="selflink">camroll</a></dt>
            <dd>Determines whether or not the camera rotates around the roll axis.<br>
              values: true/false, default: false</dd>
            <dt><a name="friction" href="#friction" class="selflink">friction</a></dt>
            <dd> Dampens the gyroscope values, making the result less &quot;twitchy&quot;. 0 means no dampening, 1 is infinite dampening (ie: no gyroscope movement)<br>
              values: 0-1, default: 0.5</dd>
            <dt><a name="velastic" href="#velastic" class="selflink">velastic</a></dt>
            <dd>If set to a value greater than 0, the vlookat parameter returns to the device pitch after manually altering the view. The higher the value, the faster the view returns to the device pitch.<br>
              values: 0-1, default: 0</dd>
            <dt><a name="vrelative" href="#vrelative" class="selflink">vrelative</a></dt>
            <dd>When set to true, the vertical movement is set relative to the initial view when the gyro plugin is enabled. In combination with velastic="0", this prevents the view from "nosediving" if the device is flat on a table.<br>
              values: true/false, default: false</dd>
          </dl>
        </div>
        <div class="paragraph">
          <h2><a name="example" href="#example" class="selflink">Example</a></h2>
          <script>
            function showexample() 
            {
                var iframe = '<iframe id="ccexample" name="ccframe" src="examples/gyro.html" width="100%"  height="300" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe>';
                document.getElementById("example").innerHTML = iframe;
            }
        </script>
          <div id="example" onclick="showexample();" style="width:100%;height:300px;color:white;background-color:black;border:1px solid gray;cursor:pointer;">
            <table width="100%" height="100%" style="color:white;">
              <tr valign="middle">
                <td><center>
                    <b>CLICK TO VIEW EXAMPLE</b>
                  </center></td>
              </tr>
            </table>
          </div>
        </div>
        <div class="paragraph">
          <h2><a name="license" href="#license" class="selflink">License</a></h2>
          <p><a href="http://creativecommons.org/licenses/by/3.0/"><img src="http://i.creativecommons.org/l/by/3.0/88x31.png" alt="CC-BY-3.0" width="88px" height="31px" hspace="8" border="0" align="right"></a> The plugin can be used free of charge, in commercial or non-commercial applications. The source code is available under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution</a> license.</p>
          <p>In a nutshell, this means you are free to use the software and its source code in your projects. If you use the source code in another software project, you are required to add attribution to the author(s). You are encouraged to share the your source code under a similar fashion, but it is not a requirement.</p>
          <p><form action="https://www.paypal.com/cgi-bin/webscr" method="post" style="float:right;margin:0 8px;">
            <input type="hidden" name="cmd" value="_s-xclick">
            <input type="hidden" name="hosted_button_id" value="KZEYXA3FSY6PQ">
            <input type="image" src="http://files.fieldofview.com/paypal-donate-button.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
            <img alt="" border="0" src="https://www.paypalobjects.com/WEBSCR-640-20110401-1/en_US/i/scr/pixel.gif" width="1" height="1">
          </form> If you use the plugins regularly, you may consider making a donation so I can afford to continue making these plugins and making them available.</p>
        </div>
        <!-- USER CONTENT ENDS HERE --> 
      </div>
    </div>
  </div>
  <div id="krpano_footerwrapper">
    <div id="krpano_footer">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
          <tr>
            <td align="right">Copyright &copy; 2011 krpano.com</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<!-- Piwik -->
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://logs.fieldofview.com/" : "http://logs.fieldofview.com/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 4);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script><noscript><p><img src="http://logs.fieldofview.com/piwik.php?idsite=4" style="border:0" alt="" /></p></noscript>
<!-- End Piwik Tracking Code -->
</body>
</html>
